<template>
  <div class="tabs-process">
    <div class="tabs-process__scroller">
      <div
        :class="[
          'tabs-process__item',
          {
            'tabs-process__active': i === tabIndex
          }
        ]"
        v-for="(v, i) in tabItems"
        :key="i"
        @click="onClick(i)"
      >
        <span>{{ v }}</span>
        <CloseOutlined />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue"
import { CloseOutlined } from "@ant-design/icons-vue"
import { useRouter } from "vue-router"

export default defineComponent({
  components: { CloseOutlined },
  setup() {
    const tabIndex = ref(1)
    const tabItems = ["首页", "用户列表", "菜单权限", "角色列表"]
    const $route = useRouter()

    // 点击切换tab
    const onClick = v => {
      if (tabIndex.value === v) return
      tabIndex.value = v
      if (v === 2) {
        $route.replace({ path: "/sys/menu" })
      } else if (v === 1) {
        $route.replace({ path: "/sys/user" })
      } else {
        $route.replace({ path: "/sys/role" })
      }
    }
    return {
      tabIndex,
      onClick,
      tabItems
    }
  }
})
</script>

<style lang="scss">
$white: #ffffff;
$gray: #909399;
$default-theme-color: #1890ff;

.tabs-process {
  margin-top: 10px;
  padding: 0 16px;
  &__scroller {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  &__item {
    background-color: $white;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    margin-right: 10px;
    color: $gray;
    cursor: pointer;
    & span:first-child {
      margin-right: 10px;
    }
  }

  &__active {
    background: $default-theme-color;
    color: #ffffff;
  }
}
</style>
